<!--
 * 倒计时天数组件
 * 该组件用于显示距离特定日期的剩余天数，并在点击时弹出对话框。
-->
<template>
  <!-- 倒计时容器，点击时显示对话框 -->
  <div class="countdown-container" @click="showDialog = true">
    <!-- 显示倒计时提示信息 -->
    <p class="prompt">{{ countdownOption.title }}</p>
    <!-- 显示剩余天数的容器 -->
    <div class="day-wrap">
      <!-- 显示具体天数 -->
      <span class="day-num">{{ countdownOption.day }}</span>
      <!-- 显示天数单位 -->
      <span class="day-unit">天</span>
    </div>
  </div>

  <!-- 倒计时天数对话框，使用 v-model 控制显示状态 -->
  <CountdownDayDialog v-model="showDialog" />
</template>

<script lang="ts" setup>
// 导入 Vue 的响应式 API 和计算属性 API
import { ref, computed, type ComputedRef } from 'vue';
// 导入日期处理库 moment
import moment from 'moment';
// 导入倒计时天数对话框组件
import CountdownDayDialog from './countdown-day-dialog.vue';
// 导入倒计时天数状态仓库
import { useCountdownDayStore } from '@/stores/countdownDayStore';

// 创建倒计时天数状态仓库实例
const countdownStore = useCountdownDayStore();

// 定义对话框显示状态的响应式变量
const showDialog = ref<boolean>(false);

/**
 * 计算目标日期与当前日期的天数差
 * @param targetDate - 目标日期
 * @returns 目标日期与当前日期的天数差
 */
const getDiffDays = (targetDate: Date): number => {
  return moment(targetDate).endOf('day').diff(moment(), 'days');
};

/**
 * 计算倒计时选项，根据状态仓库中的数据或当前日期自动判断
 * @returns 包含倒计时提示信息和剩余天数的对象
 */
const countdownOption: ComputedRef<{ title: string, day: number }> = computed(() => {

  // 从状态仓库中获取倒计时标题
  const storeTitle = countdownStore.getCountdownDayTitle();
  // 从状态仓库中获取倒计时日期
  const storeDay = countdownStore.getCountdownDay();

  // 如果状态仓库中有有效的标题和日期，且日期在当前日期之后
  if (storeTitle && storeDay instanceof Date && moment(storeDay).isAfter(moment())) {
    return {
      title: storeTitle,
      day: getDiffDays(storeDay),
    };
  } else {
    // 未设置时自动判断：
    // 获取当前日期
    const today = new Date();
    // 获取当前日期是星期几（0-6，0 表示周日，6 表示周六）
    const dayOfWeek = today.getDay();
    if (dayOfWeek >= 1 && dayOfWeek <= 5) { // 周一到周五（1-5）
      // 计算本周六的日期
      const saturday = new Date(today);
      saturday.setDate(today.getDate() + (6 - dayOfWeek)); // 本周六
      return {
        title: '距离周六还有',
        day: getDiffDays(saturday)
      };
    } else { // 周六（6）或周日（0）
      // 计算下周一的日期
      const monday = new Date(today);
      monday.setDate(today.getDate() + (dayOfWeek === 6 ? 2 : 1)); // 周六+2天=周一，周日+1天=周一
      return {
        title: '距离周一还有',
        day: getDiffDays(monday)
      };
    }
  }
});
</script>

<style lang="scss" scoped>
/**
 * 倒计时容器样式
 */
.countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;

  /**
   * 倒计时提示信息样式
   */
  .prompt {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 8px;
  }

  /**
   * 天数显示容器样式
   */
  .day-wrap {
    display: flex;
    align-items: center;
    align-items: baseline;
    gap: 4px;

    /**
     * 具体天数样式
     */
    .day-num {
      font-size: 2.5rem;
      font-weight: bold;
      color: #2c3e50;
    }

    /**
     * 天数单位样式
     */
    .day-unit {
      font-size: 1.2rem;
      color: #666;
    }
  }
}
</style>